/**
 * Created by Administrator on 2017/7/4.
 * 基于jquery
 */
(function(window){
    function PageEditor(options){
        var options = this.options = options || {};
        var dom = options["dom"];
        if(dom instanceof  jQuery){
            dom = dom.get(0);
        }
        this.components = options["components"] || ["tuwen","tuwen","tuwen","tuwen","tuwen","tuwen","tuwen","tuwen","tuwen"];
        this.exist = [];
        this.doc = window.document;
        this.parentDom = dom;
        renderPageEditor.apply(this);
    }

    function renderPageEditor(){
        this.mainDom = this.doc.createElement("div");
        this.parentDom.appendChild( this.mainDom );
        $(this.mainDom).addClass("main_editor");
        renderContaniner.call(this)
        renderComponentPanel.call(this);
    }

    function renderContaniner(){
        this.container = this.doc.createElement("div");
        $(this.container).addClass("container");
        this.mainDom.appendChild( this.container );
    }

    function renderComponentPanel(){
        this.componentPanelDom = this.doc.createElement("div");
        this.mainDom.appendChild( this.componentPanelDom );
        $(this.componentPanelDom).addClass("componentPanel");
        var p = this.doc.createElement("p");
        $(p).appendTo(this.componentPanelDom).text("请从下面选择基本模块").addClass("title");
        var ul = this.doc.createElement("ul");
        $(ul).appendTo(this.componentPanelDom);
        var components = this.components;
        var self = this;
        for(var i = 0;i<components.length;i++){
            var componentName = components[i];
            if(!window[componentName]){
                $.getScript("js/"+componentName+".js",function(){
                    addComponentIcon.call(self,componentName,ul);
                })
            }else{
                addComponentIcon.call(this,componentName,ul);
            }
        }
    }

    function addComponentIcon(name,parentDom){
        var li = this.doc.createElement("li");
        li.onclick = function(name){
            var nameOption = this.options[name];
            var component = PageEditor.getComponentByName(name,nameOption);
            this.addComponent(component);
        }.bind(this,name);
        var icon = PageEditor.getComponentIconByName(name);
        var caption = PageEditor.getComponentCaptionByName(name);
        li.innerHTML = "<i class='"+icon+"'></i><p>"+caption+"</p>";
        parentDom.appendChild(li);
    }

    var PageEditorFuncs = {
        addComponent : function(component){
            var c = component.getParentDom();
            this.container.appendChild(c);
            this.exist.push(component);
            component.editor = this;
        }
    }

    PageEditor.getComponentByName = function(name,option){
        if(!option) option = {};
        option.name = name;
        return new XComponent[name](option);
    }

    PageEditor.getComponentIconByName = function(name){
        return XComponent[name].icon;
    }

    PageEditor.getComponentCaptionByName = function(name){
        return XComponent[name].caption;
    }

    function addFuncs(){
        for(var func in PageEditorFuncs){
            PageEditor.prototype[func] = PageEditorFuncs[func];
        }
    }
    addFuncs();
    window.XEditor = PageEditor;
})(window);